<?php

/* @var $this yii\web\View */

use yii\helpers\Url;
use app\assets\EventSourceAsset;

EventSourceAsset::register($this);
$this->title = '途猪后台登录';
?>
<div id="app">
</div>
<? $this->beginBlock('otherJs') ?>
<?= $this->render('/jstemplate/validate') ?>
<?= $this->render('/jstemplate/share') ?>
<?= $this->render('/jstemplate/permission') ?>
<script type="text/x-template" id="app-template">
    <v-app>
        <v-row>
            <v-col lg="7" xl="6" col="12" class="brown darken-1 d-none d-md-flex align-center justify-center">
                <v-container>
                    <div class="pa-10">
                        <div class="row justify-center">
                            <div class="col-xl-5 col-8">
                                <div><h2 class="display-1 white--text font-weight-medium">小冯</h2>
                                    <h6
                                            class="subtitle-1 mt-4 white--text op-5 font-weight-regular">
                                        欢迎使用小冯后台
                                    </h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </v-container>
            </v-col>
            <v-col lg="5" col="12" xl="6" class="d-flex align-center">
                <v-container>
                    <v-alert
                            v-if="loginMessage != ''"
                            dark
                            :type="isSuccess?'success':'error'"
                    >
                        {{ loginMessage }}
                    </v-alert>
                    <div class="pa-7 pa-sm-12">
                        <h2 class="font-weight-bold mt-4 brown--text text--darken-2">登录</h2>
                        <h6 class="subtitle-1">登录到当地人分销后台</h6>

                        <validation-observer
                                ref="observer"
                                v-slot="{ invalid,validated,handleSubmit,validate }"
                        >
                            <form @submit.prevent="handleSubmit(onLogin)">
                                <validation-provider
                                        v-slot="{ errors,valid }"
                                        name="用户名"
                                        rules="required"
                                >
                                    <v-text-field
                                            v-model="username"
                                            :error-messages="errors"
                                            :success="valid"
                                            label="用户名"
                                            outlined
                                            prepend-icon="fa-user"
                                            class="mt-4"
                                    ></v-text-field>
                                </validation-provider>
                                <validation-provider
                                        v-slot="{ errors,valid }"
                                        name="密码"
                                        rules="required"
                                >
                                    <v-text-field
                                            v-model="pwd"
                                            :error-messages="errors"
                                            :success="valid"
                                            label="密码"
                                            outlined
                                            prepend-icon="fa-key"
                                            type="password"
                                            class="mb-4"
                                    ></v-text-field>
                                </validation-provider>
                                <v-btn
                                        type="submit"
                                        color="accent"
                                        :loading="handIsLoading"
                                        block
                                        :disabled="invalid || !validated"
                                >
                                    提交
                                </v-btn>

                            </form>
                        </validation-observer>

                        <div class="d-flex align-center mt-8">
                            <v-divider></v-divider>
                            <v-subheader >合作账号登录</v-subheader>
                            <v-divider></v-divider>
                        </div>

                        <v-row class="mt-8">
                            <v-col cols="4" offset="4">
                                <v-img v-if="$is_weixin()" src="__FRONT__assets/image/login_wechat.png"
                                       @click="onWx"></v-img>
                                <v-img :src="wechatCodeUrl" v-else></v-img>
                                <div class="text-caption text-center mt-2">微信登录</div>
                            </v-col>
                        </v-row>


                    </div>

                </v-container>
            </v-col>
        </v-row>

        <v-footer
                dark
                padless
                app
        >
            <v-card
                    class="flex"
                    flat
                    tile
            >
                <v-card-text class="py-2 white--text text-center">
                    {{ new Date().getFullYear() }} — <strong>欢迎使用当地人分销后台</strong>
                </v-card-text>
            </v-card>
        </v-footer>
    </v-app>
</script>
<script>
    new Vue({
        el: '#app',
        vuetify: vuetify,
        data: {
            model: 'tab-1',
            username: '',
            pwd: '',
            handIsLoading: false,
            isSuccess: false,
            loginMessage: '',
        },
        created: function () {
            this.$fix_url_by_weixin();
        },
        mounted() {
        },
        computed: {
        },
        methods: {
            onLogin() {
                let vue = this;
                vue.handIsLoading = true;

                axios.post("/<?=Yii::$app->params['viewPrefix']?>adminapi/auth/login", http.param({
                    username: this.username,
                    password: this.pwd,
                })).then(function (response) {
                    let ret = response.data;
                    vue.loginMessage = '登录成功';
                    vue.isSuccess = true;
                    vue.onLoginSuccess(ret);
                    vue.handIsLoading = false;
                }).catch(function (error) {
                    if (error.response) {
                        // The request was made and the server responded with a status code
                        // that falls out of the range of 2xx
                        let ret = error.response.data;
                        console.log(ret);
                        vue.loginMessage = ret.message;
                        vue.isSuccess = false;
                    } else if (error.request) {
                        // The request was made but no response was received
                        // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
                        // http.ClientRequest in node.js
                        console.log(error.request);
                    } else {
                        // Something happened in setting up the request that triggered an Error
                        console.log('Error', error.message);
                    }
                    vue.handIsLoading = false;
                });
            },
            onLoginSuccess(obj) {
                let vue = this;
                setAuth(obj);

                http.get("users/info").then(function (response) {
                    let ret = response.data;
                    vue.$local_set_user(ret)
                    window.location.href = "<?=Url::to(['index'])?>";
                });
            }
        },
        template: '#app-template'
    })
</script>
<? $this->endBlock(); ?>
